<template>
	<!-- 推荐佣金 -->
	<view slot="gBody">
		<!-- 鑫链卡记录按钮 -->
		 <!-- @touchstart="drag_start" @touchmove.prevent="drag_hmove" :style="{'transform':'translate3d('+moveX+'px,'+moveY+'px,0)'}" -->
		<view class="wqann" @tap="jilu">
			<view class="jilusty"  >
				<text style="display: block;transform: translateY(30rpx);" >卡券</text>
				<text style="transform: translateY(28rpx);display: block;">记录</text>
			</view>
			<!-- <image :style="'left:'+moveX+'px;top:'+moveY+'px'" src="../../static/xnkjinu.png" @touchstart="drag_start"
			 @touchmove.prevent="drag_hmove" mode="aspectFit" style="width: 150rpx;height: 150rpx;"></image> -->
		</view>
		<scroll-view class="grace-scroll-y" scroll-y :style="{height:height}" @scrolltolower="get_info()">
			<view v-for="(item,index) in club" :key="index">
				<image :src="item.type.imgs" mode="" @tap="dalies_vip(item.id)" style="width: 580rpx;height: 270rpx;margin:10rpx 85rpx;"></image>
				<view class="covse" v-show="item.type.id" v-if="item.card_status=='已用' || item.card_status=='付款中' || item.card_status=='交易中'" @tap="dalies_vip(item.id)">
					<text style="font-size: 80rpx;color: #FFFFFF;line-height: 270rpx;" v-show="item.card_status=='已用'">已使用</text>
					<text style="font-size: 80rpx;color: #FFFFFF;line-height: 270rpx;" v-show="item.card_status=='付款中'">付款中</text>
					<text style="font-size: 80rpx;color: #FFFFFF;line-height: 270rpx;" v-show="item.card_status=='交易中'">交易中</text>
				</view>
				<view class="bhan" v-show="item.card_status=='可用'" v-else>
					<view class="bianhao">{{'NO.'+item.card_num}}</view>
					<view class="bianx" v-show="item.card_status=='可用'">
						<view class="btn" @tap="use_sy(item.id,item.card_num)">使用</view>
					</view>
				</view>

			</view>
		</scroll-view>
		<!-- 确认变现弹框 -->
		<uni-popup ref="popup" type="center" style="z-index: 9999;">
			<view class="tabk">
				<view class="tabk_b">鑫琏卡变现</view>
				<view class="tabk_x">确认将此卡交易变现</view>
				<view class="tabk_y">折扣价{{sell_money}}元</view>
				<view class="tabk_k">可在收益页面查看余额后提现</view>
				<view class="bnts">
					<view class="qr_s" @tap="qr">确认</view>
					<view class="qx_s" @tap="qx">取消</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	export default {
		data() {
			return {
				button_color:'',//按钮颜色
				page: 0,
				club: [],
				sell_money: '',
				id: '',
				is_cover: false,
				cc_id: '',
				start: [0, 0],
				moveY: 0,
				moveX: 0,
				windowWidth: '',
				windowHeight: '',
			}
		},
		onShow() {
			var sysinfo = uni.getSystemInfoSync();
			this.height = (sysinfo.safeArea.height - 20) + 'px';
			this.get_info();

			const {
				windowWidth,
				windowHeight
			} = uni.getSystemInfoSync();
			this.windowWidth = windowWidth
			this.windowHeight = windowHeight
			this.button_color = uni.getStorageSync('button_color');
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			// 鑫链卡记录按钮拖拽功能
			drag_start(event) {
				this.start[0] = event.touches[0].clientX - event.target.offsetLeft;
				this.start[1] = event.touches[0].clientY - event.target.offsetTop;
			},
			drag_hmove(event) {
				let tag = event.touches;
				if (tag[0].clientX < 0) {
					tag[0].clientX = 0
				}
				if (tag[0].clientY < 0) {
					tag[0].clientY = 0
				}
				if (tag[0].clientX > this.windowWidth) {
					tag[0].clientX = this.windowWidth
				}
				if (tag[0].clientY > this.windowHeight) {
					tag[0].clientY = this.windowHeight
				}
				this.moveX = tag[0].clientX - this.start[0];
				this.moveY = tag[0].clientY - this.start[1];
			},
			jilu() {
				uni.navigateTo({
					url: '/pages/personal_center/Xinka_record'
				})
			},
			// 获取vip卡券列表数据
			get_info() {
				var vm = this;
				vm.page += 1;
				vm.myPost(
					'api/Myvip/get_vip_list', {
						page: vm.page,
						limit: 10,
					},
					function(res) {
						if (res.code == 200) {
							console.log(res);
							var club_list = res.data.data;
							for (let i = 0; i < club_list.length; i++) {
								vm.club.push(club_list[i])
							}
						}

					}
				)
			},
			// vip卡使用
			use_sy(card_id,coding) {
				uni.navigateTo({
					url:'/pages/personal_center/Use_file??vip_id=' + card_id + '&coding=' + coding
				})
			},
			// 查看卡使用详情跳转页面按钮
			dalies_vip(id) {
				uni.navigateTo({
					url:'/pages/personal_center/card_delias?vip_id=' + id
				})
			}
		},
		components: {
			uniPopup
		}
	}
</script>

<style>
	.jilusty{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: rgba(224,224,224,1);
		opacity: 0.9;
		text-align: center;
		/* line-height: 120rpx; */
		
		font-size: 20rpx;
		font-weight: bold;
		
	}
	.bhan {
		display: flex;
		justify-content: space-between;
	}

	.bianhao {
		float: left;
		margin-top: -65rpx;
		z-index: 99;
		color: rgba(250, 146, 52, 1);
		font-size: 29rpx;
		margin-left: 120rpx;
	}

	.bianx {
		margin-right: 90rpx;
	}

	.btn {
		display: inline-block;
		/* float: right; */
		width: 120rpx;
		height: 35rpx;
		font-size: 22rpx;
		line-height: 35rpx;
		transform: translateY(-60rpx);
		background-color: #000000;
		color: #FFFFFF;
		border: 1rpx solid #FFFFFF;
		text-align: center;
		border-radius: 10rpx;
		/* margin-right: 18rpx; */
	}

	.tabk {
		width: 540rpx;
		height: 340rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;

	}

	.tabk_b {
		font-size: 32rpx;
		margin-left: 180rpx;
		transform: translateY(40rpx);
	}

	.tabk_x {
		margin-top: 10rpx;
		font-size: 32rpx;
		margin-left: 120rpx;
		transform: translateY(40rpx);
	}

	.tabk_y {
		font-size: 32rpx;
		margin-left: 180rpx;
		transform: translateY(40rpx);
	}

	.tabk_k {
		font-size: 22rpx;
		margin-left: 120rpx;
		transform: translateY(40rpx);
		color: rgba(154, 154, 154, 1);
		margin-top: 21rpx;
	}

	.bnts {
		display: flex;
		justify-content: space-between;
		margin-top: 82rpx;
	}

	.qr_s {
		width: 270rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: rgba(80, 160, 254, 1);
		font-size: 34rpx;
		color: #FFFFFF;
		border-radius: 0 0 0 10rpx;
		text-align: center;
	}

	.qx_s {
		width: 270rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: rgba(80, 187, 254, 1);
		font-size: 34rpx;
		color: #FFFFFF;
		border-radius: 0 0 10rpx 0;
		text-align: center;
	}

	.covse {
		/* position:absolute;left:0rpx;top:0rpx; */
		margin-top: -250rpx;
		background: rgba(0, 0, 0, 1);
		width: 580rpx;
		/*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
		height: 270rpx;
		filter: alpha(opacity=60);
		/*设置透明度为60%*/
		opacity: 0.5;
		/*非IE浏览器下设置透明度为60%*/
		/* display: none; */
		transform: translateY(-40rpx);
		margin-left: 85rpx;
		z-Index: 9;
		border-radius: 20rpx;
		text-align: center;
	}

	.wqann {
		position: absolute;
		top: 957rpx;
		right: 0;
		margin-right: 15rpx;
		z-index: 99;
	}
</style>
